<template>
  <div>
    <h1>个人中心</h1>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane />
      <el-tab-pane style="margin-left: 20px;" label="用户首页" name="first">
        <el-row>
          <el-col :span="12">
            <div>
              <el-descriptions title="用户信息" column="1 " style="font-size: 25px;">
                <el-descriptions-item label="用户名">{{data.user_name}}</el-descriptions-item>
                <el-descriptions-item label="性别">{{data.gender}}</el-descriptions-item>
                <el-descriptions-item label="年龄">{{data.age}}</el-descriptions-item>
                <el-descriptions-item label="身份证号">{{data.idcard}}</el-descriptions-item>
                <el-descriptions-item label="出生日期">{{data.birthday}}</el-descriptions-item>
                <el-descriptions-item label="手机号">{{data.telephone}}</el-descriptions-item>
                <el-descriptions-item label="邮箱">{{data.e_mail}}</el-descriptions-item>
                <el-descriptions-item label="居住地">{{data.address}}</el-descriptions-item>
                <el-descriptions-item label="备注">{{data.remark}}</el-descriptions-item>
              </el-descriptions>
            </div>
          </el-col>
          <el-col :span="12">
            <el-card style="width: 200px;">
              <el-image el-image :src="'http://localhost:8080/FileUpload/downFile/'+ avatar" :preview-src-list="['http://localhost:8080/FileUpload/downFile/'+ this.avatar]" alt=""></el-image>
              <div style="padding: 14px;">
                <hr color="black" width="100%" />
                <h4>用户头像</h4>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="修改个人信息" name="second">
        <el-form ref="forms" :model="forms">
          <el-row>
            <el-col :span="12">
              <el-form-item label="用户名">
                <el-input v-model="froms.user_name" style="width: 400px;" disabled></el-input>
              </el-form-item>
              <el-form-item label="性别">
                <el-radio v-model="froms.gender" label="男" style="width: 100px;">男</el-radio>
                <el-radio v-model="froms.gender" label="女" style="width: 100px;">女</el-radio>
              </el-form-item>
              <el-form-item label="年龄">
                <el-input v-model="froms.age" style="width: 400px;"></el-input>
              </el-form-item>
              <el-form-item label="手机号">
                <el-input v-model="froms.telephone" style="width: 400px;"></el-input>
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input v-model="froms.e_mail" style="width: 400px;"></el-input>
              </el-form-item>
              <el-form-item label="居住地">
                <el-input v-model="froms.address" style="width: 400px;"></el-input>
              </el-form-item>
              <el-form-item label="备注">
                <el-input type="textarea" v-model="froms.remark" style="width: 400px;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-image el-image :src="'http://localhost:8080/FileUpload/downFile/'+ data.avatar" style="width: 200px;height: 200px;" alt=""></el-image>
              <el-upload
                :before-upload="beforeUpload"
                :on-success="handleSuccess"
                action="api/FileUpload/saveFile"
              >
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">文件大小不能超过10M</div>
              </el-upload>
            </el-col>
          </el-row>
          <span style="margin-left: 1200px;">
          <el-button type="primary" @click="updatexx()">修改</el-button>
          </span>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="修改密码" name="third">
        <el-form ref="pass" :model="pass">
          <el-form-item label="账号">
            <el-input v-model="pass.account" style="width: 60%" disabled></el-input>
          </el-form-item>
          <el-form-item label="验证码">
            <el-input v-model="pass.e_mail" style="width: 30%" disabled></el-input>
            <el-input v-model="pass.yzm" style="width: 15%;margin-left: 60px"></el-input>
            <el-button style="margin-left: 60px" @click="getyzm">获取验证码</el-button>
          </el-form-item>
          <el-form-item label="新密码">
            <el-input v-model="pass.password1" style="width: 60%"></el-input>
          </el-form-item>
          <el-form-item label="确认密码">
            <el-input v-model="pass.password2" style="width: 60%"></el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import axios from 'axios'

export default {
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar',
      'name',
      'data'
    ]),
  },
  data() {
    return {
      activeName: 'first',
      imagePath: '',
      froms: {

      },
      pass:{
        account: '',
        e_mail: '',
        yam: '',
        password1:'',
        password2: ''
      }
    };
  },
  mounted() {
    this.froms = this.data
    this.pass.account = this.data.account
    this.pass.e_mail = this.data.e_mail
  },
  methods: {
    updatexx() {
      const formData = {
        user_name: this.froms.user_name,
        gender: this.froms.gender,
        age: this.froms.age,
        address: this.froms.address,
        remark: this.froms.remark,
        tx: this.froms.avatar,
        accountname: this.data.account
      }
      console.log(formData)
      this.updateuser(formData)
    },
    async updateuser(est) {
      console.log(est)
      try {
        // 发送POST请求并设置Content-Type为application/json
        const response = await axios.post('/api/grzx/update', est, {
          headers: {
            'Content-Type': 'application/json'
          }
        })
        console.log(response)
        const { code, flag, message, data } = response.data
        alert(message)
      } catch (error) {
        console.error('Failed to fetch article:', error)
      }
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleSuccess(res) {
      console.log(res.data)
      this.froms.avatar = res.data
      this.data.avatar = res.data
    },
    beforeUpload(file) {
      const isLt5M = file.size / 1024 / 1024 < 10
      if (!isLt5M) {
        console.log('文件大小超过限制')
        this.$message.error('上传的文件大小不能超过 10MB!')
        return false
      }
      return true
    },
    getyzm() {

    }
  }
}
</script>
